<template>
  <div
    class="chart-line"
  >
    <ve-line
      :series="series"
      :colors="colors"
      :yAxis="yAxis"
      :tooltip="{
      trigger: 'axis',
    axisPointer: {
    type: 'cross',
    label: {
    backgroundColor: '#6a7985'
    }
    }
    }"
      :legend-visible="legendVisible"
    ></ve-line>
  </div>
</template>

<script>

  import graphic from 'echarts/lib/util/graphic';

  export default {
    name: "retain-line",

    props: {
      list: [Array, Object],
      format: Function,
      legendVisible: Boolean,
      title: {}
    },
    data() {
      return {
        colors: ['#1e5adc','#d20d25', '#e6a23c',
          '#d48265', '#91c7ae','#749f83',
          '#ca8622', '#bda29a','#6e7074',
          '#546570', '#c4ccd3'],
        yAxis : {
          axisLabel: {
            formatter: '{value}%',
          },
        },
        xAxis: {
          type : 'category',
          data: []
        },
        series: [
          {
            type:'line',
            data: [],
            areaStyle: {
              normal: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#f3f7fe'
                }, {
                  offset: 1,
                  color: '#ffffff'
                }])
              }
            }
          },
        ],
      }
    },

    watch: {
      cList(cList) {

        this.series[0].name = '用户留存率';
        this.series[0].data = _.map(cList, '用户留存率');
        this.xAxis.data = _.map(cList, '日期');
      }
    },

    computed: {
      cList() {
        return _.map(this.list, (info) => {

          let percent = '';
          if (!info.day || !info.num) {
            percent = 0.00;
          } else {
            percent = _.formatDiv(info.num * 100, info.day, {fixed: 2});
          }
          return {
            '日期': info.date,
            '用户留存率': percent,
          };
        });
      }
    }
  }
</script>

<style lang="scss">
  @include b(chart-line) {
    width: 100%;
  }
</style>
